'use client'
import React, {useState} from "react"
import styles from "./index.module.scss"

interface Listprops{
  className?: string
  title: React.ReactElement | string 
  list: Array<{
    txt:React.ReactElement | string 
    time:React.ReactElement | string 
  }>
  more: () => void
}
const List: React.FC<Listprops> = ({className = '', title = "", list = [], more}) => {
  return(<div className={`${styles['list-component']} ${className}`}>
      <div className={`${styles.title}`}> {title}:</div>
      <div className={`${styles["list"]}`}>
        {
          list.map((l, i) => <div key={i} className={`${styles["list-item"]}`}>
            <div className={`${styles["txt"]}`}> {l.txt} </div>
            <div className={`${styles["time"]}`}>{l.time}</div>
          </div>)
        }
      </div>
      {
        list.length > 10 &&  <div className={`${styles["down"]}`}>
        <i className="fa-solid fa-angles-down" onClick={() => more()}></i>
      </div>
      }
  </div>)
}


export default List;